<template>
    <el-container>
        <el-header>
            <div class="total">
                <div class="s1">租房管理系统</div>
                <div class="s2"><el-button type="text" style="color: white" @click="logout">退出登录</el-button></div>
                <div class="blue-bar"></div>
            </div>
        </el-header>


        <el-container>
            <el-aside width="200px">
                <el-menu class="menu" default-active="activeIndex" background-color="#293C50" text-color="#FFFFFF"
                    active-text-color="#ffd04b" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">个人信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-goods"></i>
                        <span slot="title">房源信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-goods"></i>
                        <span slot="title">预约申请</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-bell"></i>
                        <span slot="title">用户反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="编号" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" width="180">
                    </el-table-column>
                    <el-table-column prop="orderTime" label="预约时间" width="180">
                    </el-table-column>
                    <el-table-column prop="userName" label="预约人" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="预约人" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.status == 0 ? '待处理' : (scope.row.status == 1 ? '预约成功' : '预约失败') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status == 0">
                                <el-button type="text" @click="accept(scope.row.id)">同意</el-button>
                                <el-button type="text" @click="reject(scope.row.id)">拒绝</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
const token = sessionStorage.getItem('adminToken');
export default {
    data() {
        return {
            activeIndex: '4',
            tableData: [],
        }
    },
    methods: {
        logout() {
            this.$router.push({ name: "userAppointment" });
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "adminHome" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAccount" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "houseInfo" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAppointment" });
                    break;
                case '5':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userMess" });
                    break;
            }
        },
        accept(id) {
            axios.get(`/admin/house/order/status?id=${id}&status=1`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(result => {
                axios.get('/admin/house/getOrder', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(result => {
                    this.tableData = result.data.data;
                })
            })
        },
        reject(id) {
            axios.get(`/admin/house/order/status?id=${id}&status=2`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(result => {
                axios.get('/admin/house/getOrder', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(result => {
                    this.tableData = result.data.data;
                })
            })
        },
    },
    mounted() {
        axios.get('/admin/house/getOrder', {
            headers: {
                'Authorization': `Bearer ${token}`
            },
        }).then(result => {
            this.tableData = result.data.data;
        })
    }
}
</script>

<style scoped>
.el-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: rgb(41, 60, 80);
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.el-aside {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
}

.el-main {
    position: absolute;
    left: 200px;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
}

.menu {
    height: 100%;
    padding: 0;
}

.s1 {
    float: left;
}

.s2 {
    float: right;
}

.blue-bar {
    height: 10px;
    background-color: rgb(0, 135, 244);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>